<template>
	<view class="auto" :style="colorStyle">
		<view class="text--w111-000 fs-40">请拍摄/上传本人身份证件</view>
		<view class="text--w111-666 fs-24 mt-10">
			<text>我们将对信息加密，实时保障信息安全，</text>
      <text v-if="needComplete.includes(1)" class="ons fs-30" @click="toggle = !toggle">
        {{!toggle? '切换手动输入' : '切换拍照上传'}}
      </text>
		</view>
		<view class="form mt-50 bg--w111-fff" v-if="toggle">
			<view class="item">
				<text>您的姓名</text>
				<input 
					type='text'
					v-model="form.real_name"
					placeholder='请输入真实姓名'
					placeholder-class='placeholder'
          :disabled="idDisabled"
				></input>
        <view v-if="hasIdApi && !isDaike" class="add" @click="getId">
          一键录入
        </view>
			</view>
			<view class="item">
				<text>身份证号码</text>
				<input
					type='text'
					v-model="form.card_id"
					placeholder='请输入身份证号'
					placeholder-class='placeholder'
          :disabled="idDisabled"
				></input>
			</view>
		</view>
		<view class="list mt-50 bg--w111-fff" v-else>
			<view class="item" @click="goCamera(1)">
				<view class="fs-30">点击上传身份证人像面</view>
				<text class="iconfont icon-ic_camera tuxiang" v-if="!form.infoImg" />
				<image v-else class="tuxiang" :src="form.infoImg" mode="aspectFill" />
			</view>
			<view class="item" @click="goCamera(2)">
				<view class="fs-30">点击上传身份证国徽面</view>
				<text class="iconfont icon-ic_camera tuxiang" v-if="!form.emblemImg" />
				<image v-else class="tuxiang" :src="form.emblemImg" mode="aspectFill" />
			</view>
		</view>
		<view class="bottoms">
			<view class="text-center mt-50">
				<view class="fs-20 text--w111-666">信息仅用于身份证验证，{{ configData.site_name }}保障您的信息安全</view>
				<view class="btn" @click="save">
          <text v-if="isDaike">提交</text>
          <text v-else>提交</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {appCanGetId} from "@/config/app";
import Routine from '@/libs/routine';
	import auto from '@/mixins/auto'
	import colors from "@/mixins/color";
import {ocrIdcard, verifyUser, verifyCheckUser, userDataConfig} from '@/api/user.js';
import {bindingAlipayAuth} from "../../../api/public";
	export default {
		mixins: [auto, colors],
		data() {
			return {
        configData: this.$Cache.get('BASIC_CONFIG'),
        name: '',
				cartId: '',
				toggle: true,
				form: { card_id: '', real_name: '', infoImg: '', emblemImg: '',store_id:'' },
        orderKey:'',
        userId:'',
        isDaike:false,
        idDisabled:false,
        hasIdApi:false,
        needComplete:[]
			};
		},
		created() {
			uni.getSystemInfo({
				success: (infd) => {
					this.name = infd.appName
				}
			});
      // 有隐私权限
      if(appCanGetId){
        this.hasIdApi=true
      }
		},
		onLoad(options) {
      // 代客下单
      if(options.type && options.type==='daike'){
        this.isDaike=true
      }
      this.orderKey=options.orderKey
      this.userId=options.userId
      this.cartId = options.cartId
      this.form.store_id = options.store_id
			uni.$on('isUpdateCard', res => {
				const { type, base64 } = res
				if(type == 1) this.form.infoImg = base64
				if(type == 2) this.form.emblemImg = base64
			})

      this.userDataConfig()
		},
		onUnload() { uni.$off() },
		methods:{
      // 获取身份证配置
      userDataConfig(){
        userDataConfig().then(res=>{
          if (res.status === 200) {
            this.needComplete = res.data.user_auth_config || []
          }
        })
      },
      getId(){
        Routine.getCode()
          .then(code => {
            console.log(code)
            this.bindingAlipayAuth(code);
          })
      },
      bindingAlipayAuth(code) {
        bindingAlipayAuth({code:code}).then(res=>{
          if(res.status===200){
            this.form.card_id=res.data.cert_no
            this.form.real_name=res.data.user_name
            this.idDisabled=true
          }
        })
      },
			goCamera(type){
				uni.navigateTo({ url: '/pages/users/card_camera/index?type=' + type})
			},
			save(){
				const data = {}
				if(this.toggle) {
					if(!this.form.real_name) return this.$util.Tips({ title: '请填写姓名' });
					if(!this.form.card_id) return this.$util.Tips({ title: '请填写身份证号' });
					data['card_id'] = this.form.card_id
          data['real_name'] = this.form.real_name
          data['store_id'] = this.form.store_id
				} else {
					if(!this.form.infoImg) return this.$util.Tips({ title: '请上传身份证正面' });
					if(!this.form.emblemImg) return this.$util.Tips({ title: '请上传身份证反面' });
					data['infoImg'] = this.form.infoImg.replace(/^data:image\/\w+;base64,/, "")
					data['emblemImg'] = this.form.emblemImg.replace(/^data:image\/\w+;base64,/, "")
          data['store_id'] = this.form.store_id
				}
        // 代客下单
        if(this.isDaike){
          data['orderKey']=this.orderKey
          data['uid']=this.userId
          data['cartId']=this.cartId
        }

        data['user_id']= this.$store.getters.userInfo.uid
				uni.showLoading({ title: '提交中', mask: true })
				ocrIdcard(data).then(res => {
					uni.hideLoading();
					this.$util.Tips({ title: '提交成功' })
					setTimeout(() => { this.verifyOk() },1500)
				}, err => { 
					uni.hideLoading();
					this.$util.Tips({ title: err }) 
				}).catch(err => {
					uni.hideLoading();
					this.$util.Tips({ title: err })
				})
			},
			verifyOk() {
				uni.$emit('verify', true)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
.auto{
	padding: 30upx;
	.ons{
		color: var(--view-priceColor);
	}
	.form{
		padding: 30upx;
		border-radius: 10upx;
		.item{
			margin-bottom: 20upx;
			border-bottom: 1px solid #f3f3f3;
      display: flex;
      align-items: center;
			text {
        flex:0 0 160rpx;
        white-space: nowrap;
				font-size: 26upx;
				margin-bottom: 10upx;
			}
			input {
				flex:1;
				height: 60upx;
				font-size: 26upx;
			}
      .add{
        color: #fff;
        padding: 8px 10px;
        height: auto;
        line-height: 1;
        font-size: 12px;
        border-radius: 10upx;
        box-sizing: border-box;
        background-color: var(--view-priceColor);
      }
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	.list{
		padding: 30upx;
		border-radius: 10upx;
		.item{
			display: flex;
			align-items: center;
			margin-bottom: 30upx;
			padding-bottom: 30upx;
			justify-content: space-between;
			border-bottom: 1px solid #f3f3f3;
			.tuxiang{
				width: 300upx;
				height: 200upx;
				font-size: 60upx;
				text-align: center;
				line-height: 200upx;
				border-radius: 10upx;
				color: var(--view-gradient);
				border: 2px dashed var(--view-gradient);
			}
			&:last-child{
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}
		}
	}
	.bottoms{
		left: 0;
		width: 100%;
		bottom: 100upx;
		position: fixed;
		padding: 0 30upx;
		text-align: center;
		.btn{
			width: 100%;
			color: #fff;
			height: 72upx;
			margin-top: 20upx;
			line-height: 72upx;
			border-radius: 10upx;
			box-sizing: border-box;
			background-color: var(--view-priceColor);
		}
	}
}
.placeholder {
	color: #ccc;
	font-size: 26upx;
}
</style>
